<template>
  <div class="wrapper">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerImg" :key="index" @click="HandleclickImg(index)" >
        <div class="number">编号：{{store_id}}</div>
        <img :src="item" @click="swiperImgClick()">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  name: 'CompanyBanner',
  props: {
    bannerImg: Array,
    store_id: String
  },
  methods: {
    HandleclickImg (index) {
      ImagePreview({
        images: this.bannerImg,
        startPosition: index
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  height 4.5rem /* 225/50 */
  .van-swipe
    width 100%
    height 100%
  .my-swipe
    .van-swipe-item
      position relative
      img
        width 100%
        height 100%
        object-fit cover
      .number
        position absolute
        bottom 0rem /* 0/50 */
        left 0rem /* 20/50 */
        width 2.58rem /* 129/50 */
        height .7rem /* 35/50 */
        line-height .7rem /* 35/50 */
        font-size .26rem /* 13/50 */
        color #fff
        font-family PingFang SC
        font-weight 500
        text-align center
        background-color rgba(0,0,0,.4)
        border-radius 0 .2rem /* 10/50 */ 0 0
    /deep/ .van-swipe__indicators
      bottom .4rem /* 20/50 */
      /deep/ .van-swipe__indicator
        width .3rem /* 15/50 */
        height .06rem /* 3/50 */
        background-color rgba(255,255,255,.5)
</style>
